<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刘天平-购物车</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			tr {
				text-align: center;
			}
			.head{background-color: #F5F5F5; height:1500PX ;}
			.div0 {background-color: white;
				width: 100%;
				height: 102px;
				text-indent: 3em;
				border-bottom: orangered 3px solid;
				margin-bottom: 25px;
			} .em{cursor: pointer;
				font-style: normal;
				display: inline-block;
				width: 18px;
				height: 18px;
				border: 1px solid #E0E0E0;}
			#buy #tdbody .checko em{cursor: pointer;
				font-style: normal;
				display: inline-block;
				width: 18px;
				height: 18px;
				border: 1px solid #E0E0E0;
}      #buy #tdbody     .hover{background:url(../day2/2017-08-01_195127.png);}
      #buy #tdbody      .active{background: url(../day2/2017-08-01_195150.png);}
			.div0 img {
				position: relative;
				top: 23px;
				line-height: 102px;
			}
			
			#div1 {
				display: inline-block;
			}
			
			#div1 span {
				font: 1.9em "微软雅黑";
			}
			
			.body {background-color: white;
				width: 1260px;
				margin: 0 auto;
				height: auto;
			}
			.shan {
				cursor: pointer;
				position: relative;
				font: 16px bold;
				left: 60px;
				background-color: white;
				line-height: 25px;
				color: gray;
				height: 25px;
				border-radius: 50%;
				width: 25px;
			}
			.shan:hover {
				color: white;
				background-color: orangered;
			}
			
			#head {
				position: relative;
				left: -209px;
			}
				
			.input {
				height: 40px;
				width: 120px;
				border: 1px darkgray solid;
				margin: 0 auto;
			}
			
			.input span {
				font: 20px bold;
				cursor: pointer;
				text-align: center;
				line-height: 38px;
				height: 40px;
				width: 40px;
				display: block;
				float: left;
			}
			
			.input span:hover {
				background-color: gainsboro;
			}
			#box:hover{
				background-color: white;
			}
			  #text {
				line-height: 25px;
				height: 25px;
				text-align: center;
				border: none;
				outline: none;
			}
			
			
			#boy1 {
				height: 38px;
				border: 0;
				outline: none;
			}
			
			#boy2 {
				height: 38px;
				border: 0;
				outline: none;
			}
			
			#pay {cursor: pointer;
				font-size: 23px;
				background-color: #E0E0E0;
				color: gray;
				float: right;
				text-align: center;
				height: 60px;
				line-height: 50px;
				width: 180px;
			}
			.active0{color: white;
				background-color: orangered;
			}
			#tab_c {
				/*border: 1px solid;*/
				width: 100%;
				height: 2000px;
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0px;
				display: none;
			}
			
			.confirm h1 {
				position: relative;
				left: 150px;
				top: 50px;
			}
			
			#tab_c .confirm {
				position: relative;
				top: 300px;
				margin: 0px auto;
				/*border: 1px solid;*/
				width: 500px;
				height: 275px;
				background-color: white;
				z-index: 1;
			}
			
			.confirm li {
				float: left;
				list-style: none;
				margin: 30px 50px;
				position: relative;
				left: 50px;
				top: 100px;
				border: 1px solid;
				width: 100px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: white;
			}
			
			.confirm .quxiao {
				background-color: #E0E0E0;
			}
			
			.confirm .quxiao:hover {
				background-color: #B0B0B0;
			}
			
			.confirm .queding {
				background-color: #FF6700;
			}
			
			.confirm .queding:hover {
				background-color: #EA4B12;
			}
			#go {
				width: 100%;
				height: 1200px;
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0px;
				display: none;
			}
			
			#go ul {
				position: relative;
				top: 110px;
				left: 400px;
			}
			#go ul li {
				list-style-type: none;
				float: left;
				padding-right: 13px;
			}
			.fans {
				height: 300px;
				width: 237px;
				background-color: white;
			}
			.fans img {
				position: relative;
				left: 50px;
				top: 50px;
			}
			#go .circle1{color: #e0e0e0;
				border-radius: 50%;
				border: 1px solid;
				width: 20px;height: 20px;
				text-align: center;
			}
			#go ul li:hover  .circle2{
				margin-top: 3px;
				cursor: pointer;
				content: "";
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color: gainsboro;
			}
			#go ul li :hover .active1{
			border-radius: 50%;
				border: 1px orangered  solid;
				width: 20px;height: 20px;
				text-align: center;
				
				}
			#go ul li :hover .active0{margin-top: 3px;
				cursor: pointer;
				content: "";
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color: orangered;
			} 
			.font {
				font-family: "微软雅黑";
				position: relative;
				top: 40px;
				left: 10px;
				text-align: center;
			}
			.shan1 {
				cursor: pointer;
				position: relative;
				font: 20px bold;
				top: 90px;
				left: 1200px;
				background-color: white;
				line-height: 25px;
				text-align: center;
				color: gray;
				height: 25px;
				border-radius: 50%;
				width: 25px;
			}
			.shan1:hover {
				color: white;
				background-color: orangered;
			}
			#add{float: left;
			position: relative;left: 16px;font: 16px  bold grey  "微软雅黑";
			}
			.add2{cursor: pointer;
				position: relative;
			top: 490px;
			left:570px;
				display: block; text-align:center ;
			width: 140px;line-height: 35px;
			background-color: gainsboro;color: gray;}
			.add2:hover{color: white;
				background-color:grey;
			}
			#add1{color: white;
				background-color: orangered;
				border-radius: 50%;
			width: 25px;height: 25px;
			outline: none;
			border: none; 
			}
		/*下面物品*/	
		   .td4{
		   	color: orangered;
		   }
			#new {
				width: 1200px;
				height: 620px;
				margin-left: auto;
				margin-right: auto;
				padding-top: 10px;
				padding-bottom: 20PX;
			}
			
			#new li {
				width: 230px;
				height: 300px;
				background-color: white;
				float: left;
				list-style-type: none;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				margin: 0px 5px;
				margin-top: 10px;
				cursor: pointer;
			}
			
			#new .text {
				color: #333333;
			}
			
			#new .cost {
				color: #FF6700;
			}
			
			.jia {
				color: #757575;
			}
			
			#new .jia div {
				width: 124px;
				margin-left: auto;
				margin-right: auto;
				font-size: 14px;
				cursor: pointer;
			}
			#new .jia div:hover{background-color: orangered;color: white;}
			#new .picture {
				margin-top: 50px;
			}
			
			#new li:hover .jia div {
				border: 1px solid #FF6700;
			}	
	  .last{width:1330px;
	  height: 430px;
	  	margin: 0 auto;}
	  .good{cursor: pointer;
	  	margin-left: 20px;
	  	margin-top: 30px;display: inline-block;
	  	 width: 122px;height: 30px;
	  	}
	  	#addTo td:hover {
				cursor: pointer;
				background-color: #FAFAFA;
			}
			
			#showadd {
				z-index: 1;
				display: none;
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(51, 51, 51, 0.8);
			}
			
			#showadd .position {
				position: absolute;
				top: 50%;
				margin-top: -208px;
				width: 100%;
				height:416px;
			}
			#showadd .closeadd {
				width: 25px;
				height: 25px;
				border-radius: 50%;
				text-align: center;
				line-height: 25px;
				position: absolute;
				right: 100px;
				top: 10px;
				cursor: pointer;
				background-color: white;
				color: gray;
			}
			#showadd .closeadd:hover {
				background-color: #FF6700;
				color: white;
			}
			
			#showadd ul {
				width: 234px;
				height: 300px;
				display: inline-block;
				background-color: white;
				list-style-type: none;
				text-align: center;
				line-height: 10px;
				font-size: 14px;
				margin: 0 3px;
				
			}
			#showadd ul li {
				margin-top: 15px;
			}
			
			#showadd ul li img {
				width: 120px;
				height: 120px;

			}
			#showadd .click {
				width: 160px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: #b0b0b0;
				color: white;
				font-size: 14px;
				margin: 0 auto;
				cursor: pointer;
			}
			#showadd .click:hover{
				background-color: #7C7C7C;
			}
			#showadd .clickActive{
				width: 160px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: #ff6700;
				color: white;
				font-size: 14px;
				margin: 0 auto;
				cursor: pointer;
			}
			#showadd .clickActive:hover{
				background-color: #F55C05;
			}
			#showadd .title {
				font-size: 28px;
				color: white;
				font-weight: 400;
				line-height: 32px;
				text-align: center;
			}
			
			.list {
				margin: 0 auto;
				width: 1000px;
			}
			.list p{
				width: 20px;
				height: 20px;
				border: 1px solid #e0e0e0;
				border-radius: 11px;
				position: relative;
				left: 14px;
				text-align: left;
			}
			.list .check{
				display: inline-block;
				/*background-color: black;*/
				/*border: 1px solid;*/
				height: 14px;
				width: 14px;
				border-radius: 50%;
				margin-top: 3px;
				margin-left: 3px;
			}
			.list ul:hover .check{
				height: 14px;
				width: 14px;
				border-radius: 50%;
				margin-top: 3px;
				background-color: #e0e0e0;
			}
			.list ul .active8{
				margin-left: 3px;
				display: inline-block;
				height: 14px;
				width: 14px;
				border-radius: 50%;
				margin-top: 3px;
				background-color: #ff6700; 
			}
   	.foot {
				background-color: white;
			}
			
			.foot-top {
				width: 1226px;
				margin: 0 auto;
			}
			
			.foot-top ul {
				margin: 0 30px;
			}
			
			.foot-top ul li {
				float: left;
				list-style-type: none;
				padding: 0 30px;
				line-height: 79px;
			}
			
			.foot-top a {
				text-decoration: none;
				color: #616161;
				font-size: 16px;
			}
			
			.foot-top a:hover {
				color: #FF6700;
			}
			
			.foot-middle {
				width: 1226px;
				margin: 0 auto;
				clear: left;
				border-top: 1px solid #e0e0e0;
			}
			
			.foot-middle div {
				display: inline-block;
			}
			
			.middle-left {
				width: 996px;
			}
			
			.middle-left a {
				color: #757575;
				text-decoration: none;
			}
			
			.middle-list {
				width: 155px;
				height: 112px;
				font-size: 12px;
			}
			
			.middle-list ul li {
				list-style-type: none;
				line-height: 30px;
			}
			
			.middle-list ul {
				padding-top: 40px;
			}
			
			.middle-list .list-head {
				font-size: 14px;
			}
			
			.middle-right {
				border-left: 1px solid #e0e0e0;
				width: 221px;
				height: 153px;
				text-align: center;
				vertical-align: top;
				line-height: 20px;
				padding-top: 40px;
			}
			
			.middle-text span {
				font-size: 12px;
			}
			
			.middle-text .number {
				font-size: 22px;
				color: #ff6700;
			}
			
			.middle-text .customer {
				border: 1px solid #ff6700;
				padding: 5px 15px;
				line-height: 30px;
				/*margin-top: 7px;*/
			}
			
			.middle-text a {
				text-decoration: none;
				color: #ff6700;
			}

		.footer {
				background-color: #FAFAFA;
			}
			
			.footer-0 {
				width: 1226px;
				height: 57px;
				margin: 0 auto;
			}
			
			.footer-0 div {
				display: inline-block;
			}
			.footer-left div {
				display: inline-block;
			}
			.footer-p p {
				font-size: 12px;
				line-height: 18px;
				display: inline-block;
				color: #b0b0b0;
			}
			.footer-right {
				margin-top: 40px;
				vertical-align: right;
				text-align: right;
				width: 360px;
				margin-left: 100px;
			}
			.footer-right  {
			   position: relative;
			   right: -3px;
				width:190px;
			}
			
			.footer-1 {
				height: 70px;
			}
			
			.footer-1 p {
				padding-top: 20px;
				font-size: 22px;
				color: #BABABA;
				/*line-height: 19px;*/
				font-family: "楷体";
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="head">
			<div class="div0">
				<img src="img/logo.png" />
				<div id="div1"> <span>我的购物车</span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
			</div>
			<div class="body">
				<table id="buy" border="0" cellspacing="0" cellpadding="0" width="100%">
					<tbody id="tdbody">
						<tr height="72">
							<td width="70" class="checko">
							<em id="quanxuan" onclick="quanxuan()"></em>	
							</td>
							<td width="522"><span id="head">全选</span> 商品名称</td>
							<td width="80">单价</td>
							<td width="150">数量</td>
							<td>小计</td>
							<td style="position: relative;left: -26px;">操作</td>
						</tr>
						<tr height="118">
							<td width="70" class="checko">
							<em></em>	
							</td>
							<td><img src="img/pms_1474944620.67265595!220x220.jpg" height="126" width="140" />
							</td>
							<td>199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td style="color:orangered;">199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
							</tr>
						
						
						<tr height="118">
							<td width="70" class="checko">
							<em></em>	
							</td>
							<td><img src="imgIM.ADDBUY/pms_1482321199.12589253!140x140.jpg" height="126" width="140" />
							</td>
							<td >199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span  id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td  style="color:orangered;">199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
						<tr height="118">
							<td width="70" class="checko">
							<em></em>	
							</td>
							<td><img src="img/pms_1468287611.41694554!220x220.jpg" height="126" width="140" />
							</td>
							<td>199</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>
								</div>
							</td>
							<td style="color:orangered;">199</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
							</tr>
						<tr height="118">
							<td width="70" class="checko">
							<em></em>	
							</td>
							<td><img src="img/pms_1477980865.4569720!220x220.jpg" height="126" width="140" /></td>
							<td>166</td>
							<td>
								<div class="input">
									<span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span>

								</div>
							</td>
							<td style="color:orangered;">166</td>
							<td>
								<div class="shan" onclick="shan(this)">×</div>
							</td>
						</tr>
								<span id="add">
				<input type="button" name="" id="add1" value="+" onclick="add1()" />小米商品购买
				</span>
					</tbody>
				</table>
				<div height="40">
							<span style="color:gray;">继续购物</span>
							<span style="color:gray;">共</span>
								<span style="color: orangered;">4</span><span style="color:gray">件商品，已选择</span><span style="color: orangered;">0</span><span style="color:gray;">件</span>
							
							<div style="float: right;"><span style="color: orangered;font-family: '微软雅黑';">合计(不含运费):<span  id="foot" style="font-size:35px ;"><strong >0.00</strong></span></span>
								<span id="pay">去结算</span>
							</div>
						</div>
				</div>
				<h1 align="center" style="font:52px bold  '微软雅黑';color: gray;margin-top: 10px;">买购物车的人还买了</h1>
			<!--新添加产品-->
			<div id="new">
			<ul>
						<li>
							<div class="picture" style="margin-top: 0px;">
								<img src="imgIM.ADDBUY/gouwuche!234x300.jpg" />
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1479725604.55185875!140x140.jpg" />
							</div>
							<div class="text">
								小米Note2全球版
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1492759812.15846532!140x140.jpg" />
							</div>
							<div class="text">
								小米5c移动版3G内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1490088808.15771543!140x140.jpg" />
							</div>
							<div class="text">
								红米Note2全球版6G内存
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" >
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1490088813.05223210!140x140.jpg" />
							</div>
							<div class="text">
								小米MIX尊享版全面屏概念
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" >
									7.1万人好评
								</div>
							</div>
						</li>
					</ul>
					<ul>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1493907625.66266569!140x140.jpg" />
							</div>
							<div class="text">
								ZMI10号移动电源
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)" >
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1493907625.66266569!140x140.jpg" />
							</div>
							<div class="text">
								小米MIX尊享版全面屏概念
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1498704556.87635170!140x140.jpg" />
							</div>
							<div class="text">
								小米Note2全球版
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1502098360.63228592!140x140.jpg" />
							</div>
							<div class="text">
								红米Note4全网通4G版
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									3.1万人好评
								</div>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="imgIM.ADDBUY/pms_1479725604.55185875!140x140.jpg" />
							</div>
							<div class="text">
								红米Note4全网通4G版
							</div>
							<div class="cost">
								1499
							</div>
							<div class="jia">
								<div onclick="addtr(this)">
									7.1万人好评
								</div>
							</div>
						</li>
					</ul>
				</div>
				</div>	
			<div class="foot">
				<div class="foot-top">
					<ul>
						<li>
							<a href="#">预约维修服务</a>
						</li>
						<li>|</li>
						<li>
							<a href="#">7天无理由退货</a>
						</li>
						<li>|</li>
						<li>
							<a href="#">15天免费换货</a>
						</li>
						<li>|</li>
						<li>
							<a href="#">满150包邮</a>
						</li>
						<li>|</li>
						<li>
							<a href="#">520余家售后网点</a>
						</li>
					</ul>
				</div>
				<div class="foot-middle">
					<div class="middle-left">
						<div class="middle-list">
							<ul>
								<li class="list-head">帮助中心</li>
								<li>
									<a href="#">账户管理</a>
								</li>
								<li>
									<a href="#">购物指南</a>
								</li>
								<li>
									<a href="#">订单操作</a>
								</li>
							</ul>
						</div>
						<div class="middle-list">
							<ul>
								<li class="list-head">服务支持</li>
								<li>
									<a href="#">售后政策</a>
								</li>
								<li>
									<a href="#">自助服务</a>
								</li>
								<li>
									<a href="#">相关下载</a>
								</li>
							</ul>
						</div>
						<div class="middle-list">
							<ul>
								<li class="list-head">线下门店</li>
								<li>
									<a href="#">小米之家</a>
								</li>
								<li>
									<a href="#">服务网点</a>
								</li>
								<li>
									<a href="#">零售网点</a>
								</li>
							</ul>
						</div>
						<div class="middle-list">
							<ul>
								<li class="list-head">关于小米</li>
								<li>
									<a href="#">了解小米</a>
								</li>
								<li>
									<a href="#">加入小米</a>
								</li>
								<li>
									<a href="#">联系我们</a>
								</li>
							</ul>
						</div>
						<div class="middle-list">
							<ul>
								<li class="list-head">关注我们</li>
								<li>
									<a href="#">新浪微博</a>
								</li>
								<li>
									<a href="#">小米部落</a>
								</li>
								<li>
									<a href="#">官方微信</a>
								</li>
							</ul>
						</div>
						<div class="middle-list">
							<ul>
								<li class="list-head">特色服务</li>
								<li>
									<a href="#">F码通道</a>
								</li>
								<li>
									<a href="#">礼物码</a>
								</li>
								<li>
									<a href="#">防伪查询</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="middle-right">
						<div class="middle-text">
							<span class="number">400-100-5678</span><br />
							<span>周一至周日 8:00-18:00</span><br />
							<span>(仅收市话费)</span><br />
							<span class="customer"><a href="#">24小时在线客服</a></span>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="footer-0">
					<div class="footer-left">
						<div class="footer-img">
							<img src="img/logo.png" />
						</div>
						<div class="footer-p">
							<p>小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</p><br />
							<p>@mi.com 京ICP证110507号 京ICP备10046444号京公网安备11010802020134号 京网文[2014]0059-0009号</p><br />
							<p> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
						</div>
					</div>
					<div class="footer-right">
					<img src="91811d9943175c48b43d9e0b599354ae.png"/>
					</div>
				</div>
				<div class="footer-1">
					<p>探索黑科技，小米为发烧而生</p>
				</div>
			</div>
				<!--模态框1购物-->
				<!--模态框确认删除-->
				<div id="tab_c">
					<div class="confirm">
						<h1>确定删除吗？</h1>
						<ul>
							<li class="quxiao">取消</li>

							<li class="queding">确定</li>

						</ul>
					</div>
				</div>
			<div id="showadd">
					<div class="position">
						<div class="shan1" onclick="shan1(this)">×</div>
						<div class="title">
							<p>选择产品</p>
						</div><br />
						<div class="list">
							<ul onclick="activeUl(this)">
								<li>
									<p><span class="check"></span></p>
								</li>
								<li><img src="imgIM.ADDBUY/pms_1498704556.87635170!140x140.jpg" /></li>
								<li>红米note2 3G内存</li>
								<li><span>1299元</span></li>
							</ul>
							<ul onclick="activeUl(this)">
								<li>
									<p><span class="check"></span></p>
								</li>
								<li><img src="img/pms_1468287589.40786199!220x220.jpg" /></li>
								<li>我家的风扇 蓝色</li>
								<li><span>99元</span></li>
							</ul>
							<ul onclick="activeUl(this)">
								<li>
									<p><span class="check"></span></p>
								</li>
								<li><img src="img/pms_1477980865.4569720!220x220.jpg" /></li>
								<li>我家的智能手表</li>
								<li><span>78元</span></li>
							</ul>
							<ul onclick="activeUl(this)">
								<li>
									<p><span class="check"></span></p>
								</li>
								<li><img src="img/pms_1468287611.41694554!220x220.jpg" /></li>
								<li>我家的风扇 白色</li>
								<li><span>99元</span></li>
							</ul>
						</div><br />
						<div class="click" onclick="jiaa(this)">
							<p>加入购物车</p>
						</div>
					</div>
				</div>
		<script type="text/javascript">
						var spans = document.getElementsByTagName("em");
				document.getElementById("quanxuan").addEventListener("click", function() {
                var spans = document.getElementsByTagName("em");
                spans[0].className="active";
                    for(var i = 1; i < spans.length; i++) {
                  if (spans[0].className!="") {
                  	spans[0].className="active";
                  	spans[i].className=spans[0].className;
                  		footsum();
                  };
                         }
});
				function  xuanze() {
				for(var i = 0; i < spans.length; i++) {
					spans[i].onmouseover = function() {
						if(this.className != "active") {
							this.className = "hover";
						}
					}
					spans[i].onmouseout = function() {
						if(this.className != "active") {
							this.className = "";
						}
					}
					spans[i].onclick = function() {
						this.className = this.className != "active" ? "active" : "";
					}
				}
			}
				var tbo = document.getElementById("tdbody");
             xuanze();
			var buy = document.getElementById("buy");
			inputs = buy.getElementsByTagName("input");
			for(var i = 0; i < inputs.length; i++) {
				inputs[i].onchange = function() {
					trs = this.parentNode.parentNode.parentNode.parentNode;
					dj = trs.children[2].innerHTML;
					var num = this.value;
					//console.log(num);
					var sum = dj * num;
					trs.children[4].innerHTML = sum;
				}
			};
	

			function footsum() {
				var sum1 = 0;
				var buy = document.getElementById("buy");
				var trs = buy.children[0].children;
				for(var i = 1; i < trs.length; i++) {
						sum1 += parseFloat(trs[i].children[4].innerHTML);
   				document.getElementById("foot").innerHTML = sum1;
				}
			};

			function add1() {
				var showadd= document.getElementById("showadd");
				var add1 = document.getElementById("add1");
				add1.onclick = function() {
					showadd.style.display = "block";
				}
			};

			function shan(t) {
				var con = document.getElementById("tab_c");
				var quxiao = document.querySelector(".quxiao");
				var queding = document.querySelector(".queding");
				quxiao.onclick = function() {
					//	console.log(1);
					con.style.display = "none";
				}
				queding.onclick = function() {
					t.parentNode.parentNode.remove();
					con.style.display = "none";
					footsum();
				}
				con.style.display = "block";
			};

			function shan1(t) {
				var showadd = document.getElementById("showadd");
				var shan1 = document.querySelector(".shan1");
				shan1.onclick = function() {
					showadd.style.display = "none";
				}
			};
			function jian(t) {
				var n = 0;
				var sum = 0;
				var num = parseInt(t.parentNode.children[1].children[0].value);
				var dj = t.parentNode.parentNode.parentNode.children[2].innerHTML;
				var tr = t.parentNode.parentNode.parentNode;
				//console.log(tr);
				if(num <= 1) {
					num = 1;
				} else {
					n = num - 1;
				}
				t.parentNode.children[1].children[0].value = n;
				sum = parseInt(dj * n) - sum;
				tr.children[4].innerHTML = sum;
				footsum();
			};

			function jia(t) {
				var sum = 0;
				var n = 0;
				var dj = t.parentNode.parentNode.parentNode.children[2].innerHTML;
				var tr = t.parentNode.parentNode.parentNode;
				// 	console.log(tr);
				var num = parseInt(t.parentNode.children[1].children[0].value);

				if(num >= 20) {
					num = 20;
				} else {
					n = num + 1;
				}
				t.parentNode.children[1].children[0].value = n;
				sum += parseInt(dj * n);
				tr.children[4].innerHTML = sum;
				footsum();
			};
			function addtr(x){
				var tbody=document.getElementById("tdbody");
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				td1.innerHTML = "<em class='em'></em>";
				td1.className = "td1";
				var td2 = document.createElement("td");
				td2.innerHTML = x.parentNode.parentNode.children[0].innerHTML + x.parentNode.parentNode.children[1].innerHTML;
				var td3 = document.createElement("td");
				td3.innerHTML = x.parentNode.parentNode.children[2].innerHTML;
				var td4 = document.createElement("td");
				td4.innerHTML = '<div class="input"><span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span></div>';
				var td5 = document.createElement("td");
				td5.innerHTML = x.parentNode.parentNode.children[2].innerHTML;
				td5.className="td4";
				var td6 = document.createElement("td");
				td6.innerHTML = "<div class='shan' onclick='shan(this)'>×</div>";
				tbody.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tr.appendChild(td6);
//				console.log(tbody.appendChild(tr));
			};
			//添加模态框商品_点击变色
				function show() {
				document.getElementById("showadd").style.display = "block";
			}

			function closeShowMsg() {
				document.getElementById("showadd").style.display = "none";
			}
			
			function activeUl(t){
				var uls=t.parentNode.children;
				for (var i = 0; i < uls.length; i++) {
					uls[i].children[0].children[0].children[0].className="check";
				}
				var sel=t.children[0].children[0].children[0];
				var clickactive=t.parentNode.parentNode.lastElementChild;
				        clickactive.className="clickActive";
				sel.className=(sel.className == "check"?"active8":"check");
			}
		function jiaa(t){
			var tbody=document.getElementById("tdbody");
				var tr =document.createElement("tr");
				var td1 = document.createElement("td");
				td1.innerHTML = "<em class='em'></em>";
				td1.className = "td1";
				var td2 = document.createElement("td");
				td2.innerHTML = t.parentNode.parentNode.children[0].children[3].children[1].children[1].innerHTML+ t.parentNode.parentNode.children[0].children[3].children[1].children[2].innerHTML;
				var td3 = document.createElement("td");
				td3.innerHTML =  t.parentNode.parentNode.children[0].children[3].children[1].children[3].innerHTML;
				var td4 = document.createElement("td");
				td4.innerHTML = '<div class="input"><span onclick="jian(this)">-</span><span id="box"><input size="3"   type="text" name="" id="text" value="1" /></span><span onclick="jia(this)">+</span></div>';
				var td5 = document.createElement("td");
				td5.innerHTML = t.parentNode.parentNode.children[0].children[3].children[1].children[3].innerHTML;
				td5.className="td4";
				console.log(td5.innerHTML);
				var td6 = document.createElement("td");
				td6.innerHTML = "<div class='shan' onclick='shan(this)'>×</div>";
				tbody.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tr.appendChild(td6);
				document.getElementById("showadd").style.display = "none";
			};

		</script>
		
	</body>
</html>